/*
 * @file
 * @brief esp8266 tcp2serial bridge for klipper
 * @detauls html page template
 *
 * @author: apollo80
 * @email: apollo80@list.ru
 */


const char html_HEADER[] PROGMEM = "<!DOCTYPE html><html><head lang=\"en\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>ESP8266 Configuration Interface</title></head><body>";
const char html_BODY_PRE[] PROGMEM = "<style type=\"text/css\">body{background:#ccc;font-family:\"system-ui\";}.tabs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:590px;background-color:rgba(72,72,72,0.4);padding-left:5px;padding-right:5px;padding-bottom:5px;padding-top:5px;overflow:hidden;border-radius:15px;box-shadow:5px 10px 5px #555;}.tabs .static-header{height:40px;background:#ddd;text-align:center;font-size:24px;padding:10px 10px;border-radius:10px;cursor:pointer;}.tabs .tab-header{height:40px;display:flex;align-items:center;}.tabs .tab-header>div{width:calc(100%/2);text-align:center;color:#888;font-weight:700;cursor:pointer;font-size:14px;text-transform:uppercase;outline:none;}.tabs .tab-header>div>i{font-family:\"Symbol\";}.tabs .tab-header>div.active{color:#000;}.tabs .tab-indicator{position:relative;width:calc(100%/2);height:5px;background:#00acee;left:0px;border-radius:5px;transition:all 200ms ease-in-out;}.tabs .tab-body{position:relative;height:350px;padding:10px 10px;}.tabs .tab-body>form>div{position:absolute;top:-200%;opacity:0;margin-top:5px;transform:scale(0.9);transition:opacity 200ms ease-in-out 0ms,transform 200ms ease-in-out 0ms;}.tabs .tab-body>form>div.active{top:0px;opacity:1;transform:scale(1);margin-top:0px;padding-right:10px;}.tabs .tab-button{position:absolute;bottom:0;float:bottom;height:100px;width:calc(100% - 20px);cursor:pointer;color:white;font-size:20px;font-weight:600;border-radius:5px;margin:5px;}.tabs .tab-button .button-blue{position:relative;width:calc(100% - 10px);border:2px #fbfbfb solid;cursor:pointer;background-color:#3498db;color:white;font-size:20px;padding-top:5px;padding-bottom:5px;font-weight:700;margin:5px;border-radius:5px;}.tabs .tab-button .button-blue:hover{background-color:#99ddff;color:#0493bd;}.data-input{width:100%;font-size:20px;color:#3c3c3c;background-color:#fbfbfb;padding:5px 5px 5px 24px;margin-top:10px;margin-bottom:10px;box-sizing:border-box;border-radius:5px;border:2px solid rgba(0,0,0,0);}.data-input[type=text]:disabled{background-color:#bbb;}.label-staticIP{display:inline-block;width:75%;background-color:rgba(72,72,72,0);font-size:20px;color:#3c3c3c;padding:5px 5px 5px 0px;}.checkbox-staticIP{float:right;width:15%;margin:5px 2px 5px 0px;height:25px;}.toggle{float:right;--width:56px;--height:32px;position:relative;display:inline-block;margin-top:10px;margin-bottom:10px;width:var(--width);height:var(--height);border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,0.3);cursor:pointer}.toggle input{display:none}.toggle .labels{position:absolute;top:0;left:0;width:calc(100% - 5px);height:100%;font-size:20px;font-family:\"system-ui\";border-radius:7px;border:#fbfbfb solid 2px;transition:all .4s ease-in-out;overflow:hidden}.toggle .labels::after{content:attr(data-off);position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:100%;width:100%;color:#4d4d4d;background-color:#f19999;text-shadow:1px 1px 2px rgba(0,0,0,.4);transition:all .3s ease-in-out}.toggle .labels::before{content:attr(data-on);position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:calc(var(--width) * -1);height:100%;width:100%;color:#fff;background-color:#3498db;text-align:center;text-shadow:1px 1px 2px rgba(255,255,255,.4);transition:all .3s ease-in-out}.toggle input:checked~.labels::after{transform:translateX(var(--width))}.toggle input:checked~.labels::before{transform:translateX(var(--width))}</style><script>function showPassword(field,button){var field=document.getElementById(field);var button=document.getElementById(button);if (field.type==\"password\"){field.type=\"text\";button.value=\"***\";}else{field.type=\"password\";button.value=\"abc\";}}function enableStaticIP(checkBoxId){var checkBox=document.getElementById(checkBoxId);var button=document.getElementsByName(\"static_IPaddress\")[0];button.disabled=!checkBox.checked;button=document.getElementsByName(\"static_netmask\")[0];button.disabled=!checkBox.checked;button=document.getElementsByName(\"static_gateway\")[0];button.disabled=!checkBox.checked;}function onWifiMode(checkBoxId){var wifi_checkBox=document.getElementById(checkBoxId);var static_checkBox=document.getElementById(\"use_static_ip\");static_checkBox.checked=!wifi_checkBox.checked;static_checkBox.disabled=static_checkBox.checked;enableStaticIP(\"use_static_ip\");}function restart(){var request=new XMLHttpRequest();request.open(\"POST\",\"/restart\",true);request.send(\"\");}function sendData(){var form=document.form;var request=new XMLHttpRequest();var params=encodeURI(form.wifi_hostname.name + \"=\" + form.wifi_hostname.value + \"&\" +form.wifi_ssid.name + \"=\" + form.wifi_ssid.value + \"&\" +form.wifi_use_sta.name + \"=\" + form.wifi_use_sta.checked + \"&\" +form.wifi_password.name + \"=\" + form.wifi_password.value + \"&\" +form.use_static_ip.name + \"=\" + form.use_static_ip.checked + \"&\" +form.static_IPaddress.name + \"=\" + form.static_IPaddress.value + \"&\" +form.static_netmask.name + \"=\" + form.static_netmask.value + \"&\" +form.static_gateway.name + \"=\" + form.static_gateway.value + \"&\" +form.serialPort_baud.name + \"=\" + form.serialPort_baud.value + \"&\" +form.serialPort_rxBuffSize.name + \"=\" + form.serialPort_rxBuffSize.value + \"&\" +form.tcpServer_port.name + \"=\" + form.tcpServer_port.value + \"&\" +form.tcpServer_buffSize.name + \"=\" + form.tcpServer_buffSize.value);request.open(form.method,form.action,true);request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');request.send(params);}function updateFirmware(){var input=document.createElement('input');input.type='file';input.onchange=e=>{var file=e.target.files[0];var reader=new FileReader();reader.readAsArrayBuffer(file);reader.onload=readerEvent=>{var content=readerEvent.target.result;console.log(content);const data=new FormData();data.append('file',file);var request=new XMLHttpRequest();request.open(\"POST\",\"/upload\",true);request.send(data);};};input.click();}</script>";
const char html_BODY[] PROGMEM = "<div class=\"tabs\"><div class=\"static-header\"title=\"clock to update firmware\"onClick=\"updateFirmware();\">Firmware - {{firmware}}</div><div class=\"tab-header\"><div class=\"active\"><i class=\"fa fa-code\"></i>Network</div><div><i class=\"fa fa-code\"></i>Tcp2Serial</div></div><div class=\"tab-indicator\"></div><div class=\"tab-body\"><form name=\"form\" action=\"/update_config\" method=\"POST\" target=\"hidden_frame\"><div class=\"active\"><input class=\"data-input\"name=\"wifi_hostname\"type=\"text\"placeHolder=\"wifi hostname\"maxlength=\"32\"title=\"WiFi hostname\"required=\"true\"value=\"{{wifi_hostname}}\"/><input class=\"data-input\"name=\"wifi_ssid\"type=\"text\"placeHolder=\"wifi ssid\"maxlength=\"32\"title=\"WiFi SSID\"required=\"true\"value=\"{{wifi_ssid}}\"style=\"width: 75%;\"/><label class=\"toggle\" title=\"Change WiFi mode\"><input type=\"checkbox\"name=\"wifi_use_sta\"id=\"wifi_use_sta\"checked=\"{{wifi_use_sta}}\"onClick=\"onWifiMode(&quot;wifi_use_sta&quot;);\"/><span class=\"slider\"></span><span class=\"labels\" data-on=\"sta\" data-off=\"ap\"></span></label><input class=\"data-input\"type=\"password\"id=\"password\"name=\"wifi_password\"maxlength=\"32\"placeHolder=\"Wifi Password\"title=\"WiFi Password\"value=\"{{wifi_password}}\"style=\"width:75%\"/><label class=\"toggle\" title=\"Show/hide password\"><input type=\"checkbox\"checked=\"true\"id=\"pwd\"onClick=\"showPassword(&quot;password&quot;, &quot;pwd&quot;);\"/><span class=\"slider\"></span><span class=\"labels\" data-on=\"***\" data-off=\"abc\"></span></label><label class=\"label-staticIP\"for=\"use_static_ip\">Use static IP address</label><input class=\"checkbox-staticIP\"type=\"checkbox\"id=\"use_static_ip\"name=\"use_static_ip\"onClick=\"enableStaticIP(&quot;use_static_ip&quot;);\"/><input class=\"data-input\"type=\"text\"name=\"static_IPaddress\"title=\"static IP address\"placeholder=\"xxx.xxx.xxx.xxx\"pattern=\"[a-z]{4,8}\"size=\"12\"required=\"true\"disabled=\"true\"value=\"{{static_IPaddress}}\"/><input class=\"data-input\"type=\"text\"name=\"static_netmask\"title=\"network mask for static IP\"placeholder=\"xxx.xxx.xxx.xxx\"required=\"true\"disabled=\"true\"value=\"{{static_netmask}}\"/><input type=\"text\"name=\"static_gateway\"class=\"data-input\"title=\"gateway for static IP\"placeholder=\"xxx.xxx.xxx.xxx\"required=\"true\"disabled=\"true\"value=\"{{static_gateway}}\"/></div><div><select name=\"serialPort_baud\" class=\"data-input\">{{serialPort_baud_options}}</select><input type=\"number\"name=\"serialPort_rxBuffSize\"class=\"data-input\"title=\"Serial port RX buffer size\"placeHolder=\"Serial port RX buffer size\"required min=\"16\"max=\"65535\"value=\"{{serialPort_rxBuffSize}}\"/><p/><input type=\"number\"name=\"tcpServer_port\"class=\"data-input\"title=\"tcp2serial service port\"placeHolder=\"tcp2serial service port\"required min=\"1\"max=\"65535\"value=\"{{tcpServer_port}}\"/><input type=\"number\"name=\"tcpServer_buffSize\"class=\"data-input\"title=\"tcp2serial buffers size\"placeHolder=\"tcp2serial buffers size\"required min=\"16\"max=\"65535\"value=\"{{tcpServer_buffSize}}\"/></div></form></div><div class=\"tab-button\"><input type=\"button\"value=\"update config\"onClick=\"sendData();\"class=\"button-blue\"/><input type=\"button\"value=\"restart ESP8266\"onClick=\"restart();\"class=\"button-blue\"/></div></div>";
const char html_BODY_POST[] PROGMEM = "<script>let tabHeader=document.getElementsByClassName(\"tab-header\")[0];let tabIndicator=document.getElementsByClassName(\"tab-indicator\")[0];let tabBodyTmp=document.getElementsByClassName(\"tab-body\")[0];let tabBody=tabBodyTmp.getElementsByTagName(\"form\")[0];let tabsPane=tabHeader.getElementsByTagName(\"div\");for(let idx=0;idx < tabsPane.length;idx++){tabsPane[idx].addEventListener(\"click\",function(){tabHeader.getElementsByClassName(\"active\")[0].classList.remove(\"active\");tabsPane[idx].classList.add(\"active\");tabIndicator.style.left=`calc(calc(100% / 2) * ${idx})`;tabBody.getElementsByClassName(\"active\")[0].classList.remove(\"active\");tabBody.getElementsByTagName(\"div\")[idx].classList.add(\"active\");});}</script></body></html>";
